<template>
    <section class="base-info-wrapper">
        <el-form ref="crmTalentDialogFormRef" :model="state.ruleForm" size="default"
            label-width="120px">
            <el-row :gutter="35">

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="引进类型" prop="talentType">
                        <el-select v-model="state.ruleForm.importType" placeholder="请选择引进类型" clearable class="w100">
                            <el-option
                    v-for="dict in import_type"
                    :key="Number(dict.value)"
                    :label="dict.label"
                    :value="Number(dict.value)"
                     />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="护照编号" prop="talentName">
                        <el-input v-model="state.ruleForm.passportNo" placeholder="请输入护照编号" clearable></el-input>
                    </el-form-item>
                </el-col>


                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="留学开始日期" prop="applyDate">
                        <el-date-picker clearable v-model="state.ruleForm.studyStartDate" type="date"
                            value-format="YYYY-MM-DD" placeholder="选择留学开始日期" style="width: 100%;"> 
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="留学结束日期" prop="applyDate">
                        <el-date-picker clearable v-model="state.ruleForm.studyEndDate" type="date"
                            value-format="YYYY-MM-DD" placeholder="选择留学结束日期" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="留学院校排名" prop="schoolRank">
                        <el-input v-model="state.ruleForm.schoolRank" placeholder="请输入留学院校排名" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="留学最高院校" prop="talentNationality">
                        <el-input v-model="state.ruleForm.highestDegreeSchool" placeholder="请输入留学最高院校" clearable></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
    </section>
</template>

<script setup lang="ts">
import { reactive, defineExpose } from 'vue'
import {  getCurrentInstance} from 'vue';
import { formatDate } from '/@/utils/formatTime'

interface IFormData {
    id: string | number, 
    importType: string, 
    passportNo: string, 
    studyStartDate: string, 
    studyEndDate: string,
    schoolRank: string,
    highestDegreeSchool: string
}
const { proxy } = getCurrentInstance();
const {import_type} = proxy.parseDict("import_type");
const state = reactive({
    ruleForm: {
        importType: '',
        passportNo: '', 
        studyStartDate: '',
        studyEndDate: '',
        schoolRank: '',
        highestDegreeSchool: ''
    }
})

// 获取数据
const getData = () => [state.ruleForm];

const setData = (list: Array<IFormData > | Array<any>) => { 
    if(list.length) {
        state.ruleForm = {...list[0]};
    } 
}
// 暴露获取表单数据方法
defineExpose({ getData,setData })
</script>